<template>
  <a-spin :spinning="loading">
    <div class="card">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <span> 代还交易量 </span>
        </a-form-item>
        <a-form-item label="代还交易量达标自动升级开关">
          <a-radio-group v-model="form.repayment_status">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="2"> 关 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-for="(item, index) in form.repayment"
          :key="index"
          :label="`代还${index + 1} 级别-达标金额-方式-团队数-时间范围`"
        >
          <div class="reimburse">
            <a-select class="inputStyle" v-model="item.level_id" placeholder="级别">
              <a-select-option v-for="item in levelType" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
            <a-input v-model="item.amount" class="inputStyle" placeholder="达标金额">
              <span slot="addonAfter">元</span>
            </a-input>
            <a-select class="inputStyle" v-model="item.type" placeholder="方式">
              <a-select-option
                v-for="item in [
                  { id: '1', name: '自用' },
                  { id: '2', name: '直推' },
                  { id: '3', name: '团队' }
                ]"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-input v-model="item.count" class="inputStyle" placeholder="团队数"></a-input>
            <a-select v-model="item.time" placeholder="时间范围">
              <a-select-option
                v-for="item in [
                  { id: '1', name: '所有' },
                  { id: '2', name: '本月' },
                  { id: '3', name: '上月' }
                ]"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-icon
              :style="`${form.repayment.length < 2 ? 'visibility: hidden' : ''}`"
              @click="delRow(index)"
              class="minus-circle"
              type="minus-circle"
            />
          </div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <div style="display: flex">
            <a-button style="width: 100%" type="dashed" icon="plus" @click="addRow()"> 新增一行 </a-button>
            <a-icon style="visibility: hidden" class="minus-circle" type="minus-circle" />
          </div>
        </a-form-item>
      </a-form>
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <span> 代还交易量 </span>
        </a-form-item>
        <a-form-item label="邀请人数达标自动升级开关">
          <a-radio-group v-model="form.usercount_status">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="0"> 关 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-for="(item, index) in form.usercount"
          :key="index"
          :label="`邀请人数${index + 1} 级别-邀请人数-方式-时间范围`"
        >
          <div class="reimburse">
            <a-select class="inputStyle" v-model="item.level_id" placeholder="级别">
              <a-select-option v-for="item in levelType" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
            <a-input v-model="item.peoplecount" class="inputStyle" placeholder="邀请人数"> </a-input>
            <a-select class="inputStyle" v-model="item.type" placeholder="方式">
              <a-select-option
                v-for="item in [
                  { id: '1', name: '直推' },
                  { id: '2', name: '团队' }
                ]"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-input v-model="item.count" class="inputStyle" placeholder="团队数"></a-input>
            <a-select v-model="item.time" placeholder="时间范围">
              <a-select-option
                v-for="item in [
                  { id: '1', name: '所有' },
                  { id: '2', name: '本月' },
                  { id: '3', name: '上月' }
                ]"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-icon
              :style="`${form.usercount.length < 2 ? 'visibility: hidden' : ''}`"
              @click="delNum(index)"
              class="minus-circle"
              type="minus-circle"
            />
          </div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <div style="display: flex">
            <a-button style="width: 100%" type="dashed" icon="plus" @click="addNum()"> 新增一行 </a-button>
            <a-icon style="visibility: hidden" class="minus-circle" type="minus-circle" />
          </div>
        </a-form-item>
      </a-form>
      <a-form style="margin: 40px 0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" style="margin-right: 10px" @click="upload">提交</a-button>
          <a-button @click="getType">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</template>

<script>
import { getLevelAPI } from '@/api/follow.js'
import { getPlanInfoAPI, uploadInfoAPI } from '@/api/product.js'
export default {
  data() {
    return {
      loading: false,
      levelType: [],
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        repayment_status: 1,
        usercount_status: 1,
        repayment: [],
        usercount: [{ level_id: 27, peoplecount: '5', time: '1', type: '1' }]
      }
    }
  },
  created() {
    this.getType()
  },
  methods: {
    async getType() {
      try {
        this.loading = true
        const type = await getLevelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
        const { data } = await getPlanInfoAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
        this.form.repayment_status = data.repayment_status
        this.form.usercount_status = data.usercount_status
        this.form.repayment = data.repayment
        this.form.usercount = data.usercount
        this.levelType = type.data
      } finally {
        this.loading = false
      }
    },
    addRow() {
      this.form.repayment.push({ amount: undefined, count: '1', level_id: undefined, type: undefined, time: undefined })
    },
    addNum() {
      this.form.usercount.push({ level_id: undefined, peoplecount: '', time: undefined, type: undefined })
    },
    delRow(index) {
      this.form.repayment.splice(index, 1)
    },
    delNum(index) {
      this.form.usercount.splice(index, 1)
    },
    async upload() {
      try {
        const result = await uploadInfoAPI(this.form)
        this.getType()
        this.$message.success(result.msg)
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
.reimburse {
  display: flex;
}
.inputStyle {
  margin-right: 10px;
}
.minus-circle {
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a8a8a8;
  font-size: 24px;
}
.minus-circle:hover {
  color: #777777;
}
</style>
